<template>
  <el-drawer
    title="商品明细"
    :visible.sync="drawerVisible"
    :size="900"
    direction="rtl"
  >
    <div
      id="downloadArea"
      style="display: flex; align-items: center; flex-direction: column;place-items: 10px;"
    >
      <el-card style="width: 97%;">
        <el-descriptions :column="2">
          <el-descriptions-item label="任务单号">{{
            data.taskNum
          }}</el-descriptions-item>
          <el-descriptions-item label="出库单号">{{
            data.outboundNum
          }}</el-descriptions-item>
          <el-descriptions-item label="商品名称">{{
            data.goodsName
          }}</el-descriptions-item>
          <el-descriptions-item label="库位">{{
            data.label?data.label:'暂无库位信息'
          }}</el-descriptions-item>
          <el-descriptions-item label="数量">{{
            data.quantity
          }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card style="margin-top: 10px;width: 97%;">
        <div slot="header">
          <span>任务单二维码</span>
        </div>
        <div style="display: flex; align-items: center;flex-direction: column;">
          <vue-qr :text="taskInfoCode" :size="190" :margin="10" />
          <span>{{ data.taskNum }}</span>
        </div>
      </el-card>
    </div>
    <el-button
      style="margin: 10px;"
      type="primary"
      @click="downloadCurrentPage('downloadArea', '任务二维码')"
    >保存为图片</el-button>
  </el-drawer>
</template>

<script>
import vueQr from 'vue-qr'
import Canvas2Image from '@/utils/canvas2Image.js'
import html2canvas from 'html2canvas'
import { dibootApi } from '@/utils/request.js'
export default {
  name: 'GoodsDrawer',
  components: {
    vueQr
  },
  data() {
    return {
      drawerVisible: false,
      data: null,
      taskInfoData: null,
      taskInfoCode: ''
    }
  },
  methods: {
    open(record) {
      this.data = record
      this.drawerVisible = true
      this.getTaskInfo(this.data.taskNum)
    },
    async getTaskInfo(taskNum) {
      const res = await dibootApi.get(`/productTask/list/`, { taskNum })
      const {
        taskNum: _taskNum,
        receiptNum,
        planNum,
        quantity,
        startTime,
        endTime,
        id,
        productNum,
        productName
      } = res.data[0]
      this.taskInfoCode = JSON.stringify({
        taskNum: _taskNum,
        receiptNum,
        planNum,
        quantity,
        startTime,
        endTime,
        id,
        productNum,
        productName,
        QRCode: 'ProductTask'
      })
    },
    downloadCurrentPage(elementId, imgName) {
      // 生成图片之前，需先将整体的滚动条隐藏掉，否则生成出来的照片会偏移
      document.getElementById('app').style.overflowY = 'hidden'
      // 两个参数：所需要截图的元素id，截图后要执行的函数， canvas为截图后返回的最后一个canvas
      var shareContent = document.getElementById(elementId)
      var width = shareContent.offsetWidth
      var height = shareContent.offsetHeight
      var canvas = document.createElement('canvas')
      var scale = 6 // 这里为了下载出更清晰的图片，值越大越清晰

      canvas.width = width * scale
      canvas.height = height * scale
      canvas.getContext('2d').scale(scale, scale)

      var opts = {
        scale: 1, // 不管上面的scale是多少倍，这里只能取1，否则会显示不完全
        canvas: canvas,
        logging: true,
        width: width,
        height: height
      }
      html2canvas(shareContent, opts).then(function(canvas) {
        // 这个方式是直接将canvas保存为图片的，具体参数可自行查看源码
        // eslint-disable-next-line no-unused-vars
        var img = Canvas2Image.saveAsImage(
          canvas,
          canvas.width,
          canvas.height,
          'png',
          imgName
        )
        // 这个方式只是提供展示图片的功能，暂时没有用到
        // var img = Canvas2Image.convertToPNG(canvas, canvas.width, canvas.height,'PNG');
        //  document.body.appendChild(img);

        // 生成图片之前，需先将整体的滚动恢复为之前的状态
        document.getElementById('app').style.overflowY = 'scroll'
        // 关闭loading
      })
    }
  }
}
</script>

<style></style>
